<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件使用举例</title>

</head>
<style>

    .box {
        width: 100px;
        height: 100px;
        background-color: blueviolet;
        color: white;
        text-align: center;
        line-height: 100px;
        margin-left: 700px;
        margin-top: 400px;
    }

</style>
<body>


<div id="app">
    <div class="box"  id="box">
        hello
    </div>

    <div>
        <button @click="btnShowClick">显示</button>
        <button @click="btnHideClick">隐藏</button>
        <button @click="btnToggleClick">切换</button>

    </div>

    <h1>
       jquery版本
    </h1>
    <hr>
    <div>
        <button id="btnShow">显示</button>
        <button id="btnHide">隐藏</button>
        <button id="btnToggle">切换</button>

    </div>
</div>

</body>
<script src="../../../lib/vue.global.js"></script>
<script src="../../../lib/jquery.js"></script>


<script>




    $(document).ready(function () {
        $('#btnShow').bind('click',function () {

            alert('dd')
            $('#box').show();
        })

        $('#btnHide').bind('click',function () {
            $('#box').hide();
        })

        $('#btnToggle').bind('click',function () {
            $('#box').toggle();
        })
    })





    const app = {
        data() {
            return {
                isShow: true
            }
        }, methods: {
            btnShowClick() {
                this.isShow = true;
            },
            btnHideClick() {
                this.isShow = false;
            }, btnToggleClick() {

               /* if(this.isShow){
                    this.isShow = false;
                }else {
                    this.isShow = true;
                }*/

               this.isShow = !this.isShow;
            }
        }
    }

    Vue.createApp(app).mount('#app');

</script>


</html>